<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>

        <el-button
          style="float:right"
          icon="el-icon-search"
          type="primary"
          @click="handleCurrentChange(1)"
          size="mini">
          查询搜索
        </el-button>

        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>

        <el-popconfirm title="这是确定批量注销公司吗？" @confirm="handleDeleteSelected()">
          <el-button
            type="danger"
            icon="el-icon-delete"
            slot="reference"
            style="float:right;margin-right:15px"
            :disabled="delBtnStatus"
            size="mini">
            批量注销
          </el-button>
        </el-popconfirm>



      </div>
      <div style="margin-top: 15px">
        <!--内联表单-->
        <el-form :inline="true" :model="pagination.queryParams" size="small" label-width="140px">
          <el-form-item label="公司名" label-width="200px">
            <el-input v-model="pagination.queryParams.name" clearable/>
          </el-form-item>
          <el-form-item label="电话"  label-width="200px">
            <el-input v-model="pagination.queryParams.telephone" clearable/>
          </el-form-item>
          <el-form-item label="负责人"  label-width="200px">
            <el-input v-model="pagination.queryParams.contact" clearable/>
          </el-form-item>
        </el-form>
        <!--内联表单-->

      </div>
    </el-card>
    <div class="table-container">
      <!--展示表格-->
      <el-table
      height="560"
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="简述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="公司名"
        prop="name"
        width="170">
      </el-table-column>

      <el-table-column
        label="logo"
        width="60">
        <template slot-scope="scope">
          <el-avatar size="small" :src="scope.row.logo"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column
        label="负责人联系方式"
        prop="telephone"
        width="170">
      </el-table-column>

      <el-table-column
        label="负责人"
        prop="contact"
        width="170">
      </el-table-column>

      <el-table-column
        label="公司类型"
        prop="type"
        width="170">
      </el-table-column>

      <el-table-column
        label="公司规模"
        prop="size"
        width="170">
      </el-table-column>

      <el-table-column
        label="公司账号"
        prop="account"
        width="170">
      </el-table-column>

      <el-table-column
        label="邮箱"
        prop="email"
        width="170">
      </el-table-column>

      <el-table-column
        label="地址"
        prop="addr">
      </el-table-column>


      <el-table-column
        prop="icon"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <template>
            <el-button type="primary" icon="el-icon-view"  size="mini" slot="reference" @click="handleSeeDetail(scope.row)">详情</el-button>
            <el-button type="danger" icon="el-icon-delete"  size="mini" slot="reference" @click="handleDelete(scope.row)">注销</el-button>
          </template>

        </template>
      </el-table-column>

    </el-table>
      <!--展示表格-->
    </div>
    <div class="pagination-container">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total,sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--查看公司详情对话框-->
    <el-dialog
      title="查看公司详情对话框"
      :visible.sync="dialogFormVisible4Detail"
      width="800px"
      height="800px"
      :before-close="handleDetailFormClose">
      <el-descriptions title="企业信息">
        <el-descriptions-item label="公司名称">{{formData.name}}</el-descriptions-item>
        <el-descriptions-item label="公司账号">{{formData.account}}</el-descriptions-item>
        <el-descriptions-item label="公司负责人">{{formData.contact}}</el-descriptions-item>
        <el-descriptions-item label="公司地址">{{formData.addr}}</el-descriptions-item>
        <el-descriptions-item label="公司网址">{{formData.url}}</el-descriptions-item>
        <el-descriptions-item label="公司规模">{{formData.size}}</el-descriptions-item>
        <el-descriptions-item label="公司类型">{{formData.type}}</el-descriptions-item>
        <el-descriptions-item label="公司logo">
          <el-avatar size="small" :src="formData.logo"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="公司创建时间">{{formData.created|formatDateTime}}</el-descriptions-item>
        <el-descriptions-item label="审批状态">
          <el-tag size="small" v-if="formData.status === 0" type="info">待审核</el-tag>
          <el-tag size="small" v-else-if="formData.status === 1" type="success">通过</el-tag>
          <el-tag size="small" v-else-if="formData.status === 2" type="danger">未通过</el-tag>
        </el-descriptions-item>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <el-divider></el-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
      </el-descriptions>

      <el-descriptions title="职位信息">
        <el-descriptions-item label="岗位情况">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(item,index) in formData.postList" :key="item.id" :title="item.name" :name="item.id">
              <div>
                <span style="color: red"><i class="el-icon-coin"></i>薪资：</span>        <span style="color: #2d5c9e">{{item.salary}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: red"><i class="el-icon-s-custom"></i>岗位招募人数：</span>  <span style="color: #2d5c9e">{{item.count}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red;"><i class="el-icon-s-home"></i>工作地点：</span>     <span style="color: #2d5c9e">{{item.address}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: red"><i class="el-icon-reading"></i> 学历要求：</span>     <span style="color: #2d5c9e">{{item.education}}</span>  &nbsp;&nbsp;&nbsp;&nbsp;
                <el-divider><i class="el-icon-chat-dot-round"></i></el-divider>
              </div>
              <div>
                {{item.description}}
                <el-divider><i class="el-icon-chat-dot-round"></i></el-divider>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="公司优势">
        <el-descriptions-item label="公司优势">
          <el-tag
            v-for="tag in formData.advantageList"
            :key="tag.name">
            {{tag.name}}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>


    </el-dialog>
    <!--查看公司企业对话框-->
  </div>

</template>

<script>
import {save,deleteCompany,update,findById,findByPage,findAll,deleteByBatch,checkPass,checkRefuse} from '@/api/company';
import {formatDate} from '@/utils/date';
import {findDetailById} from "../../../api/company";
//分页数据模型
const defaultPagination = {
  currentPage: 1,
  pageSize:10,
  total:0,
  queryParams:{
    name:'',
    telephone:'',
    contact:''
  }
};
//默认的表单
const defaultCompany = {
  id: null,
  name: null,
  account: null,
  contact: null,
  telephone:null,
  email: null,
  addr: null,
  url: null,
  size: null,
  type: null,
  logo: null,
  description: null,
  status: null,
  created: null,
  postList: []
};

export default {
  name: "index",
  data() {
    return {
      pagination: Object.assign({}, defaultPagination),//分页模型
      dataList: [],//当前页要展示的分页列表数据
      formData: Object.assign({}, defaultCompany),//表单数据
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Detail:false,//详情表单是否可见
      delBtnStatus:true,//删除标识
      multipleSelection: [], //选中项数据的数组
      activeNames: ['1'],
      rule: {//表单的校验规则
        name: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        account: [{required: true, message: '请输入公司账号', trigger: 'blur'}],
        contact: [{required: true, message: '请输入公司负责人姓名', trigger: 'blur'}],
        telephone: [{required: true, message: '请输入公司联系电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入公司邮箱', trigger: 'blur'}],
        addr: [{required: true, message: '请输入公司地址', trigger: 'blur'}],
        url: [{required: true, message: '请输入公司网址', trigger: 'blur'}],
        size: [{required: true, message: '请输入公司规模', trigger: 'blur'}],
        type: [{required: true, message: '请输入公司类型', trigger: 'blur'}],
        logo: [{required: true, message: '请输入公司logo', trigger: 'blur'}],
        description: [{required: true, message: '请输入公司简述', trigger: 'blur'}],
        status: [{required: true, message: '请输入公司状态', trigger: 'blur'}],
        created: [{required: true, message: '请输入公司创立时间', trigger: 'blur'}],
      },

    }
  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  created() {
    this.findPage()
  },
  methods: {
    //处理搜索重置
    handleResetSearch() {
      this.pagination = Object.assign({}, defaultPagination);
    },
    handleChange(val) {
      console.log(val);
    },
    //弹出查询公司详情窗口的方法
    handleSeeDetail(row){
      console.info("【====系统正在弹出公司详情窗口====】")
      this.resetForm();
      this.dialogFormVisible4Detail = true;
      findDetailById(row.id).then(res=>{this.formData = res.data;})
      console.info(`====【系统正在弹出公司详情窗口成功！！并成功获取了ID为：${row.id}的公司详情窗口详情=====`)
    },
    //处理删除的方法
    handleDelete(row) {
      //弹出删除对话框
      this.$confirm(`此操作将【永久注销】该${row.name}企业, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCompany(row.id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });
        })
      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //处理表格勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtnStatus = val.length === 0
    },
    //处理批量删除
    handleDeleteSelected(){
      //定义一个删除ID的数组容器
      const ids = []
      //遍历multipleSelection，取出ID，给到容器
      for (const item of this.multipleSelection) {ids.push(item.id)}
      deleteByBatch(ids).then(res=>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        });
      });
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //关闭详情表单的方法
    handleDetailFormClose(){
      this.dialogFormVisible4Detail = false;
      this.resetForm();
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      //携带pagination对象，发送请求 只查询审核通过的公司
      this.pagination.queryParams.status = 1
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  }
}
</script>

<style scoped>

</style>
